/*第7单元 项目7-1 响应式绿色环保 CSS文件*/
html {
    font-family: sans-serif;
    /*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。*/
    box-sizing: border-box;
}
*, *:before, *:after {
    /*规定应从父元素继承 box-sizing 属性的值。*/
    box-sizing: inherit;
}
body,p,ul,li,dl,dt,dd,h1,h2,h3,h4,img{
    margin:0;
    padding:0;
    border:0;
}
ul,li{
    list-style-type:none;
}
body{
    width:100%;
    background:#fff;
    font-family: 'Roboto Slab', serif;
}
body a{
    text-decoration:none;
    transition:0.5s all;/*过渡时长为0.5s*/
}
img {
    max-width:100%;/*图片的最大宽度为100%*/
    height: auto;
    width: auto;
    vertical-align: middle;/*把此元素放置在父元素的中部*/
}
.clearfix{
    clear: both;/*清除浮动*/
}
.container{
    margin: 0 auto;
    padding: 0 15px;
    width:100%;
}
/*--header、nav--*/
.header{
    width:100%;
    background:#7ddf6c;
    padding:33px 0;
    position:relative;
}
nav ul {
    margin: 0;
    padding: 0;
}
nav ul li{
    margin:0 35px;
    display:inline-block;/*将其设置为块级元素*/
}
nav ul li a{
    font-family: 'Droid Serif', serif;
    color: #fff;
    font-size: 1.25em;/*20px÷16px=1.25*/
    font-weight:500;/*定义字体粗细*/
}
nav ul li a:hover,nav ul li a.active{
    color:#000;
}
/* 复选框用于切换菜单的开合状态 */
nav input[type="checkbox"] ,
.menu{
    position: absolute;/*相对于父元素绝对定位*/
    left: 2%;
    top: 10px;
    display:none;/*隐藏不显示*/
}
.logo{
    position:absolute;/*绝对定位，设置宽高*/
    right: 10%;
    top: 0%;
}
/*--banner--*/
.banner{
    width:100%;
    background:url(../img/banner.jpg) no-repeat 0px 0px;
    background-size:cover;
    min-height: 680px;
    overflow: hidden;
}
.banner-info{
    width: 30%;
    background:rgba(255, 255, 255, 0.65);
    padding: 30px 30px;
    float:right;
    margin-top: 320px;
}
.banner-info h3{
    font-family: 'Droid Serif', serif;
    font-size: 1.5em; /*24px÷16px=1.5*/
    color: #159400;
}
.banner-info p{
    font-size:0.875em; /*14px÷16px=0.875*/
    line-height:1.8em;
    color:#000;
    margin: 9px 0 15px;
}
.banner-info a{
    display: inline-block;/*将其设置为块级元素*/
    padding:7px 15px;
    background: #159400;
    font-size:1em;
    color:#ffffff;
}
a.button:hover,
a.button:focus,
a.button:active {
    background: #6cd79c;
    text-decoration: underline;
}
/*--mission--*/
.mission {
    background:#FFFDD2;
    padding: 80px 0;
}
.mission-header h3 {
    font-family: 'Droid Serif', serif;
    font-size: 2em;
    color: #159400;
    text-align: center;
}
.mission-container{
    margin-top: 35px;
}
.mission_div{
    width: 50%;
    float: left;
    position: relative;
    min-height: 1px;
    padding:0 15px;
}
.mission-left img {
    width: 100%;
}
.mis-one {
    margin-bottom: 30px;
}
.mis-left {
    width: 15%;
    float: left;
}
.mis-left img {
    width: 100%;
}
.mis-right {
    width: 82%;
    float: right;
}
.mis-right h3 {
    font-size: 1.25em; /*20px÷16px=1.25*/
    color: #7DDF6C;
}
.mis-right p {
    font-size: 0.875em;/*14px÷16px=0.875*/
    color: #000;
    line-height: 1.8em;
    margin: 12px 0 0 0;
}
/*--footer--*/
.footer {
    padding: 18px 0;
    background: #7ddf6c;
}
.footer p {
    margin: 9px 0 0 0;
    font-size: 0.875em;
    color: #fff;
    text-align: center;
}
.footer p a {
    color: #fff;
}
.footer p a:hover,.footer p a.active{
    color:#000;
}
